<template>
  <div class="words-box-layout">
    <el-tabs v-model="wordActiveName" type="border-card">
      <el-tab-pane label="关键词" name="keyWord">
        <key-words :time-arr="timeArr" ref="keyWordBox"></key-words>
      </el-tab-pane>
      <el-tab-pane label="搜索词" name="searchWord">
        <searchWords :time-arr="timeArr" @addKeyWord="handlerAddKeyWord" @addNoKeyWord="handlerAddNoKeyWord"></searchWords>
      </el-tab-pane>
      <el-tab-pane label="屏蔽词" name="balckWord">
        <negative-word :time-arr="timeArr" ref="noKeyWordBox"></negative-word>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  // 关键词
  import keyWords from '../../components/word-box/keyWords.vue'
  // 搜索词
  import searchWords from '../../components/word-box/searchWords.vue'
  // 屏蔽词
  import negativeWord from '../../components/word-box/negativeWord.vue'
  export default {
    name: '',
    components: {
      keyWords,
      searchWords,
      negativeWord
    }, // ·������
    props: {
      timeArr: {
        type: Object
      }
    },
    data() {
      return {
        wordActiveName: 'keyWord'
      }
    },
    computed: {

    },
    watch: {
      // obj: { //�����Ķ���
      //   deep: true, //���ȼ�������Ϊ true
      //   // ������wacth��������firstName��������֮��������ȥִ��handler����
      //       immediate: true
      //   handler: function(newV, oldV) {
      //     console.log('watch�У�', newV)
      //   }
      // }
    },
    // ������
    created() {},
    // ���غ�
    mounted() {

    },
    // ���ٺ�
    destroyed() {

    },

    // ����
    methods: {
      handlerAddKeyWord(arr) {
        console.log(arr, this.$refs['keyWordBox'], '关键词添加')
      },
      handlerAddNoKeyWord(arr) {
        console.log(arr, this.$refs['noKeyWordBox'], '否定关键词添加')
      }
    }
  }
</script>

<style scoped>
</style>
